﻿@{
    ViewBag.Title = "ChiTiet";
    Layout = "~/Views/Shared/Home/_Layout.cshtml";
}
@model BabyToys.Models.SanPham
<link href="~/Content/CSS/multizoom.css" rel="stylesheet" />
<link href="~/Content/CSS/tabControl.css" rel="stylesheet" />
<link href="~/Content/CSS/button_styles.css" rel="stylesheet" />
<script src="~/Scripts/tabControl.js"></script>
<script src="~/Scripts/jquery-2.0.3.min.js"></script>
<script src="~/Scripts/multizoom.js"></script>
<script type="text/javascript">
    jQuery(document).ready(function ($) {

        $('#image1').addimagezoom({ // single image zoom
            zoomrange: [3, 10],
            magnifiersize: [300, 300],
            magnifierpos: 'right',
            cursorshade: true,
            largeimage: 'hayden.jpg' //<-- No comma after last option!
        })


        $('#image2').addimagezoom() // single image zoom with default options

        $('#multizoom1').addimagezoom({ // multi-zoom: options same as for previous Featured Image Zoomer's addimagezoom unless noted as '- new'
            descArea: '#description', // description selector (optional - but required if descriptions are used) - new
            speed: 1500, // duration of fade in for new zoomable images (in milliseconds, optional) - new
            descpos: true, // if set to true - description position follows image position at a set distance, defaults to false (optional) - new
            imagevertcenter: true, // zoomable image centers vertically in its container (optional) - new
            magvertcenter: true, // magnified area centers vertically in relation to the zoomable image (optional) - new
            zoomrange: [3, 10],
            magnifiersize: [350, 350],
            magnifierpos: 'right',
            cursorshadecolor: '#fdffd5',
            cursorshade: true //<-- No comma after last option!
        });

        $('#multizoom2').addimagezoom({ // multi-zoom: options same as for previous Featured Image Zoomer's addimagezoom unless noted as '- new'
            descArea: '#description2', // description selector (optional - but required if descriptions are used) - new
            disablewheel: true // even without variable zoom, mousewheel will not shift image position while mouse is over image (optional) - new
            //^-- No comma after last option!	
        });

    })

</script>
<style type="text/css">
    #img_thum {
        padding: 0px;
        margin: 0px;
    }

        #img_thum li {
            list-style: none;
            padding: 3px 3px;
            float: left;
            border: 1px solid #ccc;
            width: 50px;
            height: 40px;
            margin: 2px;
        }

            #img_thum li img {
                width: 50px;
                height: 40px;
            }
</style>
<div class="content">
    <div class="content-left">
        @{Html.RenderAction("ModuleDanhMuc", "Home");}
        <br />
        @RenderPage("~/Views/Shared/Home/_ModuleSanPhamNoiBat.cshtml")
    </div>

    <div class="content-right">
        <div class="detail">
            <div class="detail-image">
                <div class="targetarea" style="border: 1px solid #eee">
                    <img id="multizoom1" alt="zoomable" title="" src="/Content/Images/SanPham/@Model.HinhDaiDien" width="200px" height="300px" />
                    @*<img id="multizoom1" alt="zoomable" title="" src="/Content/Images/DaiDienSP/2079Mo-hinh-Tomica-Hyper-Rescue-Emergency-Tower.jpg" width="200px" height="300px" />*@
                </div>
                <div class="multizoom1 thumbs list-image">
                    <ul id="img_thum">
                        <li><a href="/Content/Images/SanPham/@Model.Thumbnail" data-large="/Content/Images/SanPham/@Model.HinhDaiDien" data-title="Milla Jojovitch">
                            <img src="/Content/Images/SanPham/@Model.Thumbnail" alt="Milla" title="" /></a></li>
                        @if (ViewBag.ChiTietHinh!=null)
                        {
                            foreach (var hinhanh in ViewBag.ChiTietHinh)
                            {
                                <li><a href="/Content/Images/SanPham/@hinhanh.Thumbnail" data-large="/Content/Images/SanPham/@hinhanh.AnhGoc" data-title="Milla Jojovitch">
                                <img src="/Content/Images/SanPham/@hinhanh.Thumbnail" alt="Milla" title="" /></a></li>
                            }
                        }
                        @*<li><a href="/Content/Images/SanPham/millasmall.jpg" data-large="/Content/Images/SanPham/milla.jpg" data-title="Milla Jojovitch">
                            <img src="/Content/Images/SanPham/milla_tmb.jpg" alt="Milla" title="" /></a></li>
                        <li><a href="/Content/Images/SanPham/millasmall.jpg" data-large="/Content/Images/SanPham/milla.jpg" data-title="Milla Jojovitch">
                            <img src="/Content/Images/SanPham/milla_tmb.jpg" alt="Milla" title="" /></a></li>
                        <li><a href="/Content/Images/SanPham/millasmall.jpg" data-large="/Content/Images/SanPham/milla.jpg" data-title="Milla Jojovitch">
                            <img src="/Content/Images/SanPham/milla_tmb.jpg" alt="Milla" title="" /></a></li>
                        <li><a href="/Content/Images/SanPham/millasmall.jpg" data-large="/Content/Images/SanPham/milla.jpg" data-title="Milla Jojovitch">
                            <img src="/Content/Images/SanPham/milla_tmb.jpg" alt="Milla" title="" /></a></li>
                        <li><a href="/Content/Images/SanPham/millasmall.jpg" data-large="/Content/Images/SanPham/milla.jpg" data-title="Milla Jojovitch">
                            <img src="/Content/Images/SanPham/milla_tmb.jpg" alt="Milla" title="" /></a></li>
                        <li><a href="/Content/Images/SanPham/saleensmall.jpg" data-large="/Content/Images/SanPham/saleen.jpg" data-title="Milla Jojovitch">
                            <img src="/Content/Images/SanPham/saleen_tmb.jpg" alt="Milla" title="" width="5px" height="5px" /></a></li>*@
                    </ul>
                </div>
            </div>
            <div class="detail-content">
                <div class="detail-content-title">
                    <h4>@Model.TenSP</h4>
                </div>
                <div class="detail-content-social"></div>
                <div class="detail-content-detail">
                    <ul>
                        <li><b>Mã sản phẩm:</b> @Model.MaSP</li>
                        <li><b>Loại sản phẩm: </b> @Model.DanhMuc.TenDanhMuc</li>
                        <li><b>Hãng sản xuất:</b> @Model.ThuongHieu.TenThuongHieu</li>
                        <li><b>Sản xuất tại:</b> @Model.ThuongHieu.QuocGia</li>

                    </ul>
                </div>
                <div class="detail-content-price">
                    
                        @if (@Model.GiaKM > 0)
                        {
                             <div class="old-price">Giá cũ:  @Model.Giaban đ   </div>
                           <div class="new-price">  nay chỉ còn @Model.GiaKM đ</div>
                        }else
                        {
                         <div class="price"><h2>Giá: @Model.Giaban đ</h2></div> 
                        }
                    
                    <small></small>
                </div>
                <div class="detail-content-left">
                    Số lượng <select>
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                             </select>
                </div>
                <div class="detail-content-right">
                    <a class="large purple button dlLight" href="#">
                        <span>Thêm giỏ hàng</span>
                    </a>
                </div>

            </div>

        </div>

        <div class="tabchitiet" style="padding-left: 20px; width: 98%; height: 20px; padding-top: 20px; border-bottom: 1px solid #ccc;">
            <ul id="countrytabs" class="shadetabs">
                <li><a href="#" rel="country1" class="selected">Mô tả chi tiết</a> </li>
                <li><a href="#" rel="country2">Thông số sản phẩm</a></li>
                <li><a href="#" rel="country4">Đánh giá sản phẩm</a></li>
            </ul>
        </div>
        <div  style="background: #fff; padding: 0px; min-height: 200px;" >
            <div id="country1" class="tabcontent" >
             <p>@Html.Raw(@Model.MoTaSP)</p>
            </div>
            <div id="country2" class="tabcontent">
                <ul>
                    <li><b>Chất liệu:</b>  @Model.ChatLieu</li>
                    <li><b> Màu sắc:</b> @Model.MauSac</li>
                    <li> <b>Kích thước:</b> @Model.KichThuoc</li>
                    <li> <b>Thương hiệu:</b> @Model.ThuongHieu.TenThuongHieu</li>
                    <li> <b>Loại sản phẩm:</b> @Model.DanhMuc.TenDanhMuc</li>
                        
                </ul>
            </div>
            
            <div id="country4" class="tabcontent">
            </div>
        </div>
        <script type="text/javascript">
            var countries = new ddtabcontent("countrytabs")
            countries.setpersist(true)
            countries.setselectedClassTarget("link") //"link" or "linkparent"
            countries.init()
        </script>
    </div>
</div>
